import { ref, computed } from 'vue'

export function useGridLayout() {
  const gridSize = ref('medium')
  
  const gridSizes = {
    small: {
      cols: 'repeat(auto-fill, minmax(160px, 1fr))',
      gap: '12px',
      padding: '16px'
    },
    medium: {
      cols: 'repeat(auto-fill, minmax(200px, 1fr))',
      gap: '16px',
      padding: '20px'
    },
    large: {
      cols: 'repeat(2, minmax(0, 1fr))',
      gap: '24px',
      padding: '24px 32px'
    }
  }

  const gridStyle = computed(() => {
    const size = gridSizes[gridSize.value]
    return {
      display: 'grid',
      gridTemplateColumns: size.cols,
      gap: size.gap,
      padding: size.padding
    }
  })

  return {
    gridSize,
    gridStyle
  }
} 